<script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import { useRouter } from 'vue-router'
    import { getUserInfoApi } from '../../api'

    const router = useRouter()

    const token = localStorage.getItem('token')
    const userInfo = ref<any>({})

    const onToPath= (path?: any, query?: any) => {
        router.push({ path, query: { [query]: query } })
        // if (token) {
        //     router.push({ path })
        // } else {
        //     router.replace({ path: '/login' })
        // }
    }
    const getUserInfo = async() => {
        const { data } = await getUserInfoApi()
        userInfo.value = data
    }
    // 微信客服
    const onKefu = () => {
        window.location.href = 'https://work.weixin.qq.com/kfid/kfc15633120220f440e'
    }
    // 退出登录
    const logout = () => {
        localStorage.removeItem('token')
        location.reload()
    }

    onMounted(() => {
        if (token) getUserInfo()
    })
</script>

<template>
    <div class="flex items-end h-32 px-4 py-5 mb-2.5 bg-white">
        <van-image
            radius="0.375rem"
            width="3.75rem"
            height="3.75rem"
            fit="cover"
            :src="userInfo && userInfo.avatar"
        />
        <div v-if="token" class="flex-1 flex flex-col justify-between h-[3.75rem] ml-3.5 font-bold text-[#333]">
            <div class="text-lg">{{ userInfo && userInfo.nickname }}</div>
            <!-- <div class="flex items-end justify-between text-sm">
                <div>余额：<span class="text-xs text-[#cd0505]">￥{{ userInfo && userInfo.balance || 0 }}</span></div>
                <div>去充值<van-icon name="arrow" size="16" color="#969799" /></div>
            </div> -->
        </div>
        <div v-else class="flex items-center h-[3.75rem] ml-3.5 font-bold text-lg text-[#333]" @click="onToPath('/login')">去登陆<van-icon name="arrow" size="16" color="#969799" /></div>
    </div>
    <van-cell title="优惠劵" title-class="font-bold text-sm text-[#333]" center is-link to="/couponList">
        <template #icon>
            <van-icon name="coupon" size="20" color="#38abff" class="mr-2.5" />
        </template>
    </van-cell>
    <van-cell-group class="my-2.5">
        <van-cell title="关注列表" title-class="font-bold text-sm text-[#333]" center is-link to="/collectList">
            <template #icon>
                <van-icon name="like" size="20" color="#059972" class="mr-2.5" />
            </template>
        </van-cell>
        <van-cell title="投诉中心" title-class="font-bold text-sm text-[#333]" center is-link @click="onKefu">
            <template #icon>
                <van-icon name="question" size="20" color="#055399" class="mr-2.5" />
            </template>
        </van-cell>
        <van-cell title="理疗师入驻" title-class="font-bold text-sm text-[#333]" icon="location-o" center is-link @click="onToPath('/joinTech', 't')">
            <template #icon>
                <van-icon name="shop" size="20" color="#994b05" class="mr-2.5" />
            </template>
        </van-cell>
        <van-cell title="地址管理" title-class="font-bold text-sm text-[#333]" icon="location-o" center is-link to="/address">
            <template #icon>
                <van-icon name="location" size="20" color="#2C0599" class="mr-2.5" />
            </template>
        </van-cell>
    </van-cell-group>
    <van-cell title="联系客服" title-class="font-bold text-sm text-[#333]" class="mb-2.5" center is-link @click="onKefu">
        <template #icon>
            <van-icon name="service" size="20" color="#3c9fc7" class="mr-2.5" />
        </template>
    </van-cell>
    <div v-if="token" class="p-5">
        <van-button color="#7C6186" block @click="logout">退出登录</van-button>
    </div>
</template>